<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>jizhiCMS模板标签助手_jizhiCMS标签助手_jizhiCMS标签生成器_小郭博客</title>
    <meta name="keywords" content="jizhiCMS模板标签助手,jizhiCMS标签助手,jizhiCMS模板开发助手" />
    <meta name="description" content="jizhiCMS标签助手高效版，jizhiCMS模板开发助手，网站建设，专业仿站，前端切图，CMS二次开发，联系qq：594649546" />
    <script src="js/jquery.min.2.1.4.js"></script>
    <script src="js/url_js.js?v=1"></script>
    <script src="js/clipboard.js"></script>
    <style>
    ::-webkit-scrollbar {width: 4px; height: 1px; }
    ::-webkit-scrollbar-thumb {border-radius: 10px; background: #e8e8e8; }
    ::-webkit-scrollbar-track {border-radius: 10px; background: #EDEDED; }
        *,*:before,*:after{box-sizing:border-box;}
        html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
        body{font-size:16px;font-family:"Microsoft YaHei",Helvetica,"SimSun",Arial,sans-serif;}
        .warp{width:100%;height:100%;display:flex;}

        .main {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        .menu-left {
            width: 15%;
            overflow-y: auto;
            display: none;
        }
        .menu-right{
            width: 20%;
            overflow-y: auto;
            display: none;
            position: relative;
            font-size: 14px;
        }
        .menu-right a {
            transition: .2s;
            padding: 0 8px;
            display: inline-block;
            color: #4d8af9;
        }
        .menu-right a:hover {
            background-color: #73c1ff;
            color: #ffffff;
        }
        .main {
            padding: 20px 10px;
        }
        .powered {
            position: absolute;
            bottom: 10px;
            color: #727272;
        }

        .andy_text {
            width: 100%;
            min-height: 90px;
        }
        input[type=text] {
            outline: none;
            border: 1px solid #2196F3;
            padding: 4px 6px;
            font-size: 14px;
        }

        button {
            border: none;
            outline: none;
            background-color: #009688;
            color: #ffffff;
            padding: 6px 8px;
            min-width: 85px;
            font-size: 14px;
            cursor: pointer;
        }

        .list h4 {
            margin-bottom: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            
        }
        textarea{ 
            resize:none;
            border: 1px solid #949494;
        }
        textarea:focus {
            outline: none;
            box-shadow: 0px 0px 2px 0px #73c1ff;
        }

        .list h4.shanshan{
            animation: text_yidong 0.6s 0.1s forwards, bgr_shan 0.5s 3 forwards ;
                        
        }

        @-moz-keyframes bgr_shan {
            0% {
                background-color: #73c1ff;
              }
            50% { 
                background-color: #c0e3ff;
            }
            100% {
                background-color: #73c1ff;
            }
        }

        @keyframes bgr_shan {
            0% {
                background-color: #73c1ff;
              }
            50% { 
                background-color: #c0e3ff;
            }
            100% {
                background-color: #73c1ff;
            }
        }
        @-moz-keyframes text_yidong {
            0% {
                padding-left: 0;
              }
            
            100% {
                padding-left: 15px;
            }
        }
        @keyframes text_yidong {
            0% {
                padding-left: 0;
              }
            
            100% {
                padding-left: 15px;
            }
        }

        @media (min-width: 992px) {
            .menu-left {
                display: block;
            }
            .menu-right{
                display: block;
            }
            .main {
                width: 65%;
            }
        }
        .notice {
            color: red;
            background-color: #e8e8e8;
            font-size: 12px;
            margin-top: 3px;
        }

        .andy_input{width: 260px;}


    </style>
    <script>
        // 获取来源
        var ly = GetQueryString("ly") == null ? "copyright" : decodeURIComponent(GetQueryString("ly").toString());

        $(function(){
            $("#"+ly).addClass('shanshan');
        })

    </script>
</head>
<body>
<div class="warp">
<div class="menu-left">
    
</div>
    <div class="main">
        <h3>在线留言</h3>
        <div class="list">
<h4 id="f1">留言表单</h4>
<textarea class="andy_text" id="text_t1">
<div class="guestbook-box">
<form action="{fun U('message/index')}" method="post" >
    <ul>
        <li><label>留言主题：</label><input type="text" value="" name="title"></li>
        <li><label>联系人：</label><input type="text" value="" name="user"></li>
        <li><label>电话：</label><input type="text" value="" name="tel"></li>
        <li><label>Email：</label><input type="email" value="" name="email"></li>
        <li><label>地址：</label><input type="text" value="" name="address"></li>
        <li><label>留言内容：</label><textareaAA  name="body"></textareaAA></li>
        <
        <li><input type="submit" name="dosubmit" value="确认提交" class="jz-submit"></li>
    </ul>
</form>
</div>
</textarea>
<p class="notice">注意：上面的代码需要将textareaAA改为textarea，因为textarea不能嵌套使用，所以暂时用textareaAA代替了</p>
<button class="btn" data-clipboard-action="copy"  data-clipboard-target="#text_t1" type="button">复制</button>

<h4 id="f2">留言列表</h4>
<textarea class="andy_text" id="text_t2">
{loop table="message" isshow="1" as="v"}
留言标题 ：{$v["title"]}
留言用户名：{$v["user"]}
留言内容：{$v["body"]}
留言IP：{$v["ip"]}
留言电话：{$v["tel"]}
留言邮箱：{$v["email"]}
留言地址：{$v["address"]}
留言时间 ：{fun date("Y-m-d H:i:s",$v["addtime"])}
﻿
{/loop}
</textarea>
<button class="btn" data-clipboard-action="copy"  data-clipboard-target="#text_t2" type="button">复制</button>
    
        </div>
    </div>
<div class="menu-right">
    <div class="pd">
        <p><a class="link-to-index2" href="../index2.html">jizhicms模板标签大全文字版</a></p>
        <p><a class="link-to-index2" href="../index.html">jizhicms模板标签助手高效版</a></p>
        <p><a href="http://www.d163.net/">小郭博客首页</a></p>
        <p><a href="http://www.d163.net/html/study/" >学无止境 </a></p>
        <p><a href="http://www.d163.net/html/web2/">web前端</a></p>
        <p><a href="http://www.d163.net/html/news/">最新资讯</a></p>
        <p><a href="http://www.d163.net/webknow/" >建站知识 </a> </p>
        <p> <a href="http://www.d163.net/guestbook/" >给我留言 </a></p>
        <p> <a href="http://www.d163.net/about/" >关于我 </a></p>
        <p> <a href="http://www.d163.net/zanshang/" >赞赏我 </a> </p>
        <div class="powered">版权所有 AndyGuo 小郭博客 qq:594649546</div>
    </div>
</div>
</div>
<script src="js/autotextarea.js?v=1.0"></script>
<script type="text/javascript">
$(function(){
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        $(e.trigger).text('复制成功');
        $(e.trigger).css('background-color','#4CAF50');
        
        setTimeout(function () { $(e.trigger).text('复制');$(e.trigger).css('background-color','#009688'); }, 1500);
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        alert('失败！');
    });

    var textCode = document.getElementById("text_t1");
    var textCode2 = document.getElementById("text_t2");
    autoTextarea(textCode,10);
    autoTextarea(textCode2,10);

})

</script>

</body>
</html>